<!DOCTYPE html>
<html>
<head>
    <title>hello</title>
    <script src="/js/jquery.js"></script>
</head>
<body>
<a href="/admin/index.html">index</a> <br/>
<a href="/admin/catelist.html">catelist</a> <br/>
<a href="/admin/addcate.html">addcate</a> <br/>

<p>选择父类</p>
<div id="cate_levels">
    
<select name="level_1" id="level_1">
    <option value="null" selected>请选择</option>
</select><br/>

<select name="level_2" id="level_2">
    <option value="null" selected>请选择</option>
</select><br/>

<select name="level_3" id="level_3">
    <option value="null" selected>请选择</option>
</select><br/>

</div>

<p>类别信息</p>
<input type="text" id="cate_name" required='required' placeHolder="类别名称"><br>
<input id="add" type="button" value="add">

<script type="text/javascript">
    $('document').ready(function () {
        getCate(null,function(err,res){
            if(!res)return;
            createOption(res,'#level_1');
        });

        // 类别获取
        $('#level_1').on('change',function(e){
            // lvl2  lvl3 清除 
            clearSelect('#level_2');
            clearSelect('#level_3');
            var selected = $("option:selected",this);
            var id = selected.val();

            getCate(id,function(err,res){
                if(!res) return;
                createOption(res,'#level_2');
            });
        });

        $('#level_2').on('change',function(e){
            // lvl3 清除 
            clearSelect('#level_3');
            var selected = $("option:selected",this);
            var id = selected.val();

            getCate(id,function(err,res){
                if(!res) return;
                createOption(res,'#level_3');
            });
        });
    });

    function clearSelect(selector){
        $(selector)
        .find('option')
        .remove()    
        .end()
        .append('<option value="null">请选择</option>')
        .val('null');
    }

    // 获取pid 以及pid的子元素
    function getCate(pid,cb) {
        var url = '/api/v1/category?pid='+pid;
        if(pid===null){
            url='/api/v1/category?level=1';
        }
        $.ajax({
            url:url,
            method:'get',
            success: function (res) { 
                console.log('success',res);
                cb(null,res);
            }, 
            error: function (xhr) { 
                console.log('err',xhr.responseText);
                cb(xhr.responseText);
            } 
        });
    }

    function createOption(cateList,selector){
        if(!cateList || cateList.length===0) return;

        cateList.forEach(function(item){
            $(selector)
            .append(
                $('<option>',{
                    text:item.name,
                    value:item._id,
                })
            );
        });
    }

    $('#add').on('click',function(){
        var pid = getPid();
        var cate = {
            name:$('#cate_name').val(),
        };
        if(pid && pid !=='null') cate.pid=pid;
        console.log('post cate',cate);

        $.ajax({
            url: "/api/v1/category/", 
            type: "POST", 
            headers: {"Content-Type": "application/json;charset=UTF-8"},
            data: JSON.stringify(cate), 
            success: function (res) { 
                // cb(null, res);
                console.log('success',res);
                // TODO refresh page
                location.reload();
            }, 
            error: function (xhr) { 
                // cb(xhr.responseText);
                console.log('error',xhr.responseText);
            } 
        }); 
    });

    function getPid(){
        var pid = null;
        // level_1
        var pid1 = $('#level_1 option:selected').val();
        console.log('pid1',pid1)
        if(pid1===null || pid1==='null') return pid;

        var pid2 = $('#level_2 option:selected').val();
        console.log('pid2',pid2)
        if(pid2===null || pid2==='null') return pid1;

        var pid3 = $('#level_3 option:selected').val();
        console.log('pid3',pid3)
        if(pid3===null || pid3==='null') return pid2;

        return pid3;
    }


</script>
</body>
</html>